@extends('admin.common.main')

@section('css')
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
@endsection
@section('cnt')
    <div class="layui-form layuimini-form" lay-filter="example">
        @csrf
        <div class="layui-form-item">
            <label class="layui-form-label ">文章标题</label>
            <div class="layui-input-block">
                <input type="text" name="title" lay-verify="required"   value="" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label ">文章描述</label>
            <div class="layui-input-block">
                <input type="text" name="desc" lay-verify="required"   value="" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">文章封面</label>
            <input type="hidden" name="pic" id="pic" value="">
            <div class="layui-input-block">
                <div class="layui-upload">
                    <button type="button" class="layui-btn layui-btn-primary" id="cateBtn">
                        <i class="icon icon-upload3"></i>点击上传</button>
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" style="width: 200px;height: 100px;" id="cateImage" src="">
                        <p id="demoText"></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label ">文章内容</label>
            <div class="layui-input-block">
                <textarea id="remarkEditor"    name="body" ></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">添加文章</button>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        var editIndex;
        const  url= window.location.protocol+"//"+window.location.host;
        const  csrf = "{{csrf_token()}}";
        layui.use(['form','upload','http','layedit'], function () {
            var form = layui.form,
                layer = layui.layer,
                layedit = layui.layedit,
                http  = layui.http,
                $ = layui.$;
            //上传
            http.uplode("cateBtn",'{{route('admin.upload.image')}}',csrf,
                function(res) {
                    if(res.code==200){
                        $('#pic').val(res.data);
                        $('#cateImage').attr('src',res.data);
                        layer.msg("上传成功",{offset:['200px','450px'],icon:6});
                    }else{
                        //如果上传失败
                        return layer.msg('上传失败');
                    }
                }
            );
            // //初始化编辑器
            // editIndex = layedit.build('remarkEditor', {
            //     tool: ["strong", "italic", "underline", "del", "|", "left", "center",
            //         "right", "|", "face", "link", "unlink", "code"],
            //     height: 300, //设置编辑器高度
            // });
            layedit.set({
                //暴露layupload参数设置接口 --详细查看layupload参数说明
                uploadImage: {
                    url: '{{route('admin.upload.image')}}' //接口url
                    , type: 'post'//默认post
                    , headers: {
                        'X-CSRF-TOKEN': csrf
                    }
                    , data: {
                        _token: csrf
                    }
                    , done: function (data) {
                        console.log("111111111111111111111",data);
                    }
                }//视频
                // , uploadVideo: {
                //     url: '/admin/article/uploadImage', //接口url
                //     headers: {
                //         'X-CSRF-TOKEN': csrf_token
                //     },
                //     data: {
                //         _token: csrf_token
                //     },
                //     accept: 'video',
                //     acceptMime: 'video/*',
                //     exts: 'mp4|flv|avi|rm|rmvb',
                //     size: 1024 * 10 * 2,
                //     done: function (data) {
                //         console.log(data);
                //     }
                // }
                // , uploadFiles: {
                //     url: '/admin/article/uploadImage' ,//接口url
                //     headers: {
                //         'X-CSRF-TOKEN': csrf_token
                //     },
                //     data: {
                //         _token: csrf_token
                //     },
                //     accept: 'file',
                //     acceptMime: 'file/*',
                //     size: '20480',
                //     done: function (data) {
                //         console.log(data);
                //     }
                // }
                //右键删除图片/视频时的回调参数，post到后台删除服务器文件等操作，
                //传递参数：
                //图片： imgpath --图片路径
                //视频： filepath --视频路径 imgpath --封面路径
                // , calldel: {
                //     url: '/admin/article/uploadImage', //接口url
                //     headers: {
                //         'X-CSRF-TOKEN': csrf_token
                //     },
                //     data: {
                //         _token: csrf_token
                //     },
                //     done: function (data) {
                //         console.log(data);
                //     }
                // }
                //开发者模式 --默认为false
                , devmode: true
                //插入代码设置 --hide:true 等同于不配置codeConfig
                , codeConfig: {
                    hide: false,  //是否显示编码语言选择框
                    default: 'javascript' //hide为true时的默认语言格式
                }
                , tool: [
                    'html', 'undo', 'redo', 'code', 'strong', 'italic', 'underline', 'del', 'addhr', '|', 'fontFomatt', 'fontfamily', 'fontSize', 'fontBackColor', 'colorpicker', 'face'
                    , '|', 'left', 'center', 'right', '|', 'link', 'unlink', 'images',
                    , '|'
                    , 'table', 'customlink'
                    , 'fullScreen'
                ]
                , height: 300
            });
            editIndex = layedit.build('remarkEditor');

            //监听提交
            form.on('submit(saveBtn)', function (data) {
                //新属性赋值
                var bean = data.field;
                bean.body = layedit.getContent(editIndex);
                console.error(data,bean);
                http.httpajax('{{route('admin.article.store')}}', data.field,"POST",function(res) {
                    if(res.code === 200){
                        layer.msg(res.msg,{time:1000,icon:1},function(){
                            // 关闭弹出层
                            layer.close();
                            window.parent.location.reload();//刷新父页面
                            var iframeIndex = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(iframeIndex);
                        });
                    }else{
                        layer.msg(res.msg,{time:1000,icon:2});
                    }
                });
            });
        });
    </script>
@endsection

